
<ion-content>
    <!-- {is_focus: 0, artist_id: "14", artist_name: "hank", total_nail_count: "5", focused_count: "11", …}
    artist_avator
    :
    "192.168.1.99:7777/Uploads/default_artist.png"
    artist_id
    :
    "14"
    artist_name
    :
    "hank"
    component
    :
    ƒ NailerDetailPage(injector, params)
    focused_count
    :
    "11"
    is_focus
    :
    0
    nails
    :
    (3) [{…}, {…}, {…}]
    opts
    :
    {showBackdrop: true, enableBackdropDismiss: true}
    total_nail_count
    :
    "5"
    __proto__
    :
    Object -->
  <div class="shopDetail">
    <div class="bgImg">
      <img src="{{picture}}{{nailerList.artist_background}}" alt="">
    </div>
    <button ion-button icon-only (click)="dismiss()" style="position: absolute;top: 10px;
    left: 15px;
    width: 30px;
    height: 30px;
    border-radius: 45px;
    opacity: 0.6;
    z-index:300">
        <ion-icon name="arrow-back"  color="#ffffff" style=" font-size: 26px;" ></ion-icon>
      </button>
    <div class="shop">
      <div class="shopPic">
        <img src="{{picture}}{{nailerList.artist_avator}}" alt="">
      </div>
      <div class="shopName">
        <div style="display: inline-flex;">
          <h3>{{nailerList.artist_nickname}}</h3>
          <img src="assets/img/chuji@2x.png" *ngIf='nailerList.artist_level==1' alt="" srcset="" style="max-width: 2.5rem;height: 1.2rem;margin-top: 1.9rem;margin-left: 0.3rem">
          <img src="assets/img/zhongji@2x.png" *ngIf='nailerList.artist_level==2' alt="" srcset="" style="max-width: 2.5rem;height: 1.2rem;margin-top: 1.9rem;margin-left: 0.3rem">
          <img src="assets/img/gaoji@2x.png" *ngIf='nailerList.artist_level==3' alt="" srcset="" style="max-width: 2.5rem;height: 1.2rem;margin-top: 1.9rem;margin-left: 0.3rem">
        </div>
        <h4>ID : {{nailerList.artist_id}}&nbsp;({{nailerList.shop_name}})</h4>
      </div>
      <!-- <div class="shopStar">
        <ul>
          <li *ngFor='let yero of Mdstar'>
            <ion-icon ios="ios-star" md="md-star"></ion-icon>
          </li>
          <li *ngFor='let gary of Gray'>
           <ion-icon ios="ios-star" md="md-star" style="color: rgb(255,255,255)"></ion-icon>
          </li>
        </ul>
      </div> -->
    </div>
    <div class="shopOperate">
      <div class="fans">
        <p> {{nailerList.focus_count}} 粉丝</p>
      </div>
      <div class="concern">
        <button class="concernBtn" *ngIf = "nailerList.is_focus == 0?true:false" (click)="getUserFocus(1)">
          <img src="assets/img/ios/guanzhu@2-1x.png" alt="" class="focusIt">
          关注</button>
        <button class="concernBtn" style="background: rgba(255,255,255,0.3);" *ngIf = "nailerList.is_focus == 1?true:false" (click)="getUserFocus(0)">已关注</button>
      </div>
    </div>
  </div>
  
  <div class="imgcontent">
    <!-- 展示美甲师的作品 -->
    <ion-thumbnail *ngFor="let item of showArtistProduct,let i = index">
      <div class="thimg">
        <img src="{{picture}}{{item.nail_small_url}}" class='imgShow' alt="" (click)="gotoBuyproduct(item.nail_id)" style="border-radius:10px 10px 0 0;">
        <span class="thtext">{{item.nail_name}}</span>
        <span class="thnice" *ngIf="item.is_zan==0">
          <img src="assets/img/ios/zan-gray@2x.png" (click)="zank(item.nail_id,i)" style="width: 25px;margin-top:0.2rem;">
        </span>
        <span class="thnice" *ngIf="item.is_zan==1">
          <img src="assets/img/ios/zan-red@2x.png" (click)="zank(item.nail_id,i)" style="width: 25px;margin-top:0.2rem;">
        </span>
      </div>

    </ion-thumbnail>
  </div>
  <ion-infinite-scroll (ionInfinite)="loadMore($event)">
     <ion-infinite-scroll-content   loadingSpinner="dots" class='spinner-dark' loadingText="加载更多"></ion-infinite-scroll-content> 
  </ion-infinite-scroll>
</ion-content>